<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select v-model="listQuery.type" placeholder="图片黑白名单" clearable class="filter-item"
        style="width: 200px; margin-right: 20px">
        <el-option v-for="item in Text_value_" :key="item.type" :label="item.value" :value="item.type" />
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="query_white">
        搜索
      </el-button>
      <el-button class="filter-item" style="float: right" type="primary" icon="el-icon-edit"
        @click="dialogVisible = true">
        添加图片黑白名单
      </el-button>
    </div>

    <el-table :data="list" stripe style="width: 1060px" border>
      <el-table-column prop="id" label="ID" width="100" align="center" />
      <el-table-column prop="content" label="图片" width="200" align="center">
        <template slot-scope="scope" align="center">
          <el-image class="my-img" style="height: 60px" ref="myImg" :src="scope.row.content"
            :preview-src-list="srcList" @click="handlePriveImg(scope.row.content)" @click.stop="handleClickItem">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="类型" width="200" align="center">
        <template slot-scope="scope" align="center">
          <span>{{scope.row.type=='1'?'白名单':'黑名单'}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="add_time" label="添加时间" align="center" width="300" />
      <el-table-column fixed="right" label="操作" width="250" align="center">
        <template slot-scope="scope" align="center">
          <el-button type="primary" size="small" @click="editClick(scope.row)">
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="添加图片黑白名单" :visible.sync="dialogVisible" width="400px" center>
      <el-upload class="upload-demo" action="http://testapi2.xunyinjiaoyou.com/record/uploadImg"
        :on-success="uploadSuccess" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="1"
        :on-exceed="handleExceed" :file-list="fileList" :http-request="uploadFile">
        <el-button size="small" type="primary">点击上传</el-button>
        <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
      </el-upload>

      <div class="center_radio">
        <span>添加至 ：</span>
        <div>
          <el-radio v-model="type" label="1">白名单</el-radio>
          <el-radio v-model="type" label="2">黑名单</el-radio>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" style="width: 100%" @click="AddWhitelist">确 定</el-button>
      </span>
    </el-dialog>

    <pagination v-show="listQuery.total > 0" :total="listQuery.total" :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize" @pagination="handleFilter" />
  </div>
</template>

<script>
  import {
    encryption2
  } from '@/api/index'
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  export default {
    name: 'ComplexTable',
    components: {
      Pagination
    },
    data() {
      return {
        upload_url: "", //上传图片地址
        fileList: [],
        dialogVisible: false,
        listQuery: {
          keyword: '',
          type: '',
          total: 0,
          pageNo: 1,
          pageSize: 10,
        },
        type: '1',
        list: [],
        Text_value_: [{
            type: 1,
            value: "图片白名单"
          },
          {
            type: 2,
            value: "图片黑名单"
          }
        ],
        srcList: [],
        text: ''
      }
    },
    created() {
      this.handleFilter()
    },
    methods: {
      uploadFile(param) {
        var that = this; //避免this指针在后面的请求以后改变
        var fileObj = param.file;
        // this.uploadAction是接收上传文件的后台地址
        var FileController = "https://api2.xunyinjiaoyou.com/record/uploadImg";
        // FormData 对象
        var forms = new FormData();
        // 文件对象
        forms.append("file", fileObj);
        // XMLHttpRequest 对象
        var xhr = new XMLHttpRequest();
        xhr.open("post", FileController, true);
        xhr.onload = function () {
          var strData = xhr.response; //回传的数据接受
          var jsonData = JSON.parse(strData); //这里由于后端接口返回的是String，而后面需要的是json
          that.upload_url = jsonData.result; //取出json中对应需要的数据存入form表单中
        };
        xhr.send(forms);
      },
      beforeUpload(file) {
        let fd = new FormData(); //通过form数据格式来传
        fd.append("picFile", file); //传文件
      },
      uploadSuccess(res) {
        console.log(res);
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      handlePriveImg(row) {
        this.srcList = []
        this.srcList.push(row); //将后端的这一行的数据push进数组中
        this.$refs.myImg.clickHandler();
      },
      // 确认添加
      AddWhitelist() {
        if (!this.upload_url) {
          return this.$message({
            message: '上传图片为空',
            type: 'error'
          })
        }
        const arys = {
          imgUrl: this.upload_url,
          type: this.type
        }
        const url = '/audit/imgBlackWhiteAdd'
        encryption2(arys, url).then((res) => {
          if (res.data.status === 0) {
            this.$message({
              message: res.data.text,
              type: 'success'
            })
            this.upload_url = '',
              this.fileList = [],
              this.handleFilter()
          } else {
            this.$message({
              message: res.data.text,
              type: 'error'
            })
          }
          this.text = ''
          this.dialogVisible = false
        })
      },
      //   移除提示
      editClick(row) {
          this.$message({
          message: "暂不支持！请联系后台开发人员",
          type: 'error'
        })
        // const _ = this
        // console.log(row);
        // this.$confirm(`确认移除ID: ${row.id} 图片吗`, '提示', {
        //     confirmButtonText: '确定',
        //     cancelButtonText: '取消',
        //     type: 'warning'
        //   })
        //   .then(() => {
        //     _.editwhite(row)
        //   })
        //   .catch(() => {
        //     this.$message({
        //       type: 'info',
        //       message: '已取消删除'
        //     })
        //   })
      },
      // 获取图片遮罩层dom
      handleClickItem() {
        setTimeout(function () {
          let domImageMask = document.querySelector(".el-image-viewer__wrapper");
          if (!domImageMask) {
            return;
          }
          domImageMask.addEventListener("click", (e) => {
            if (e.target.parentNode.className == 'el-image-viewer__actions__inner' || e.target.parentNode.className == 'el-image-viewer__btn el-image-viewer__next'  || e.target.parentNode.className == 'el-image-viewer__btn el-image-viewer__prev') {
              return; //如果点击底部菜单，不关闭
            }
            // 点击遮罩层时调用关闭按钮的 click 事件
            document.querySelector(".el-image-viewer__close").click();
            document.querySelector('body').setAttribute('style', 'overflow:auto;')
          });
        }, 300)
      },
      // 确认移除名单
      editwhite(row) {
        const arys = {
          id: row.id
        }
        //移除图片黑白名单需对接数美，没有接口
        const url = ''
        encryption2(arys, url).then((res) => {
          if (res.data.status === 0) {
            this.$message({
              message: res.data.text,
              type: 'success'
            })
          } else {
            this.$message({
              message: res.data.text,
              type: 'error'
            })
          }
          this.handleFilter()
        })
      },
      query_white() {
        (this.listQuery.pageNo = 1), this.handleFilter()
      },
      // 查询
      handleFilter() {
        const arys = {
          type: this.listQuery.type,
          page: this.listQuery.pageNo,
          pageSize: this.listQuery.pageSize
        }
        const url = '/audit/imgBlackWhiteList'
        encryption2(arys, url).then((res) => {
          if (res.data.status === 0) {
            this.list = res.data.result.list
            this.listQuery.total = res.data.result.total
          } else {
            this.$message({
              message: res.data.text,
              type: 'error'
            })
          }
        })
      }
    }
  }
</script>
<style scoped>
  .filter-container .filter-item {
    margin-bottom: 0;
  }

  .el-table--border {
    border-right: 1px solid #dfe6ec;
  }

  .filter-container {
    width: 1060px;
  }

  .center_radio {
    width: 88%;
    justify-content: center;
    display: flex;
    margin-top: 40px;
  }

  .center_radio>div {
    display: flex;
    flex: 1;
    justify-content: space-around;
  }
</style>